<template>
  <ScreenLayoutWithMenu title="数据可视化大屏 - 绩效分析">
    <!-- KPI统计数据行 -->
    <div class="kpi-section">
      <KPICard label="目标完成率" value="157.41%" green />
      <KPICard label="按时到货订单数" value="61,384" />
      <KPICard label="到货及时率" value="61.38%" orange />
      <KPICard label="库存周转率" value="2.24" green />
      <KPICard label="库存覆盖天数" value="45.1" green />
    </div>

    <!-- 图表区域 -->
    <div class="screen-grid grid-performance">
      <ChartCard title="商品完成率" grid-area="a">
        <ECharts :option="productCompletionOption" />
      </ChartCard>
      <ChartCard title="客户类型完成率" grid-area="b">
        <ECharts :option="customerTypeOption" />
      </ChartCard>
      <ChartCard title="产品采销四象限" grid-area="c">
        <ECharts :option="quadrantOption" />
      </ChartCard>
    </div>
  </ScreenLayoutWithMenu>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import ScreenLayoutWithMenu from '../components/ScreenLayoutWithMenu.vue'
import KPICard from '../components/KPICard.vue'
import ChartCard from '../components/ChartCard.vue'
import ECharts from '../components/ECharts.vue'
import * as echarts from 'echarts'
import './Screen.css'

const productCompletionOption = ref({})
const customerTypeOption = ref({})
const quadrantOption = ref({})

onMounted(() => {
  // 商品完成率
  productCompletionOption.value = {
    backgroundColor: 'transparent',
    tooltip: {
      trigger: 'axis',
      axisPointer: { type: 'cross' }
    },
    legend: {
      data: ['销售额', '销售完成率'],
      textStyle: { color: '#fff' },
      top: 10
    },
    grid: {
      left: '10%',
      right: '10%',
      top: '20%',
      bottom: '20%'
    },
    xAxis: {
      type: 'category',
      data: ['Product_3', 'Product_7', 'Product_10', 'Product_1', 'Product_5', 'Product_8', 'Product_6', 'Product_2', 'Product_4', 'Product_9'],
      axisLine: { lineStyle: { color: '#1890ff' } },
      axisLabel: { color: '#fff', rotate: 45 }
    },
    yAxis: [
      {
        type: 'value',
        name: '销售额',
        axisLine: { lineStyle: { color: '#1890ff' } },
        axisLabel: { color: '#fff', formatter: '{value}' },
        splitLine: { lineStyle: { color: 'rgba(24, 144, 255, 0.1)' } }
      },
      {
        type: 'value',
        name: '销售完成率',
        axisLine: { lineStyle: { color: '#1890ff' } },
        axisLabel: { color: '#fff', formatter: '{value}%' },
        splitLine: { show: false }
      }
    ],
    series: [
      {
        name: '销售额',
        type: 'bar',
        data: [9500000, 9200000, 8800000, 8500000, 8200000, 8000000, 7800000, 7500000, 7200000, 7000000],
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#1890ff' },
            { offset: 1, color: '#36cfc9' }
          ])
        }
      },
      {
        name: '销售完成率',
        type: 'line',
        yAxisIndex: 1,
        data: [17, 15, 260.42, 245.32, 64.01, 71.12, 58.23, 62.45, 68.91, 183.57],
        lineStyle: { color: '#ff9800', width: 2 },
        itemStyle: { color: '#ff9800' },
        label: {
          show: true,
          position: 'top',
          color: '#ff9800',
          formatter: '{c}%'
        }
      }
    ]
  }

  // 客户类型完成率
  customerTypeOption.value = {
    backgroundColor: 'transparent',
    tooltip: {
      trigger: 'axis',
      axisPointer: { type: 'cross' }
    },
    legend: {
      data: ['销售额', '销售完成率'],
      textStyle: { color: '#fff' },
      top: 10
    },
    grid: {
      left: '10%',
      right: '10%',
      top: '20%',
      bottom: '15%'
    },
    xAxis: {
      type: 'category',
      data: ['Hospital'],
      axisLine: { lineStyle: { color: '#1890ff' } },
      axisLabel: { color: '#fff' }
    },
    yAxis: [
      {
        type: 'value',
        name: '销售额',
        axisLine: { lineStyle: { color: '#1890ff' } },
        axisLabel: { color: '#fff', formatter: '{value}' },
        splitLine: { lineStyle: { color: 'rgba(24, 144, 255, 0.1)' } }
      },
      {
        type: 'value',
        name: '销售完成率',
        min: 100,
        max: 200,
        axisLine: { lineStyle: { color: '#1890ff' } },
        axisLabel: { color: '#fff', formatter: '{value}%' },
        splitLine: { show: false }
      }
    ],
    series: [
      {
        name: '销售额',
        type: 'bar',
        data: [48000000],
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#1890ff' },
            { offset: 1, color: '#36cfc9' }
          ])
        }
      },
      {
        name: '销售完成率',
        type: 'scatter',
        yAxisIndex: 1,
        data: [[0, 157.41]],
        symbolSize: 20,
        itemStyle: { color: '#ff9800' },
        label: {
          show: true,
          position: 'right',
          color: '#ff9800',
          formatter: '{c[1]}%'
        }
      }
    ]
  }

  // 产品采销四象限
  quadrantOption.value = {
    backgroundColor: 'transparent',
    tooltip: {
      trigger: 'item',
      formatter: '{b}<br/>采购: {c[0]}<br/>销售: {c[1]}'
    },
    legend: {
      data: ['Antibiotics', 'Antiviral', 'Painkillers'],
      textStyle: { color: '#fff' },
      top: 10
    },
    grid: {
      left: '10%',
      right: '10%',
      top: '20%',
      bottom: '15%'
    },
    xAxis: {
      type: 'value',
      name: '采购数量',
      axisLine: { lineStyle: { color: '#1890ff' } },
      axisLabel: { color: '#fff' },
      splitLine: { lineStyle: { color: 'rgba(24, 144, 255, 0.1)' } }
    },
    yAxis: {
      type: 'value',
      name: '销售数量',
      axisLine: { lineStyle: { color: '#1890ff' } },
      axisLabel: { color: '#fff' },
      splitLine: { lineStyle: { color: 'rgba(24, 144, 255, 0.1)' } }
    },
    series: [
      {
        name: 'Antibiotics',
        type: 'scatter',
        data: [
          [280000, 4500000],
          [270000, 4200000],
          [290000, 4800000]
        ],
        symbolSize: 15,
        itemStyle: { color: '#1890ff' },
        label: {
          show: true,
          position: 'right',
          color: '#fff',
          formatter: (params) => `Product_${params.dataIndex + 1}`
        }
      },
      {
        name: 'Antiviral',
        type: 'scatter',
        data: [
          [260000, 3800000],
          [250000, 3600000],
          [270000, 4000000]
        ],
        symbolSize: 15,
        itemStyle: { color: '#000' },
        label: {
          show: true,
          position: 'right',
          color: '#fff',
          formatter: (params) => `Product_${params.dataIndex + 4}`
        }
      },
      {
        name: 'Painkillers',
        type: 'scatter',
        data: [
          [300000, 5000000],
          [310000, 5200000],
          [290000, 4800000]
        ],
        symbolSize: 15,
        itemStyle: { color: '#ff9800' },
        label: {
          show: true,
          position: 'right',
          color: '#fff',
          formatter: (params) => `Product_${params.dataIndex + 7}`
        }
      }
    ]
  }
})
</script>

